import React, { useState } from "react";
import "./App.css";
import Pokemon from "./components/Pokemon";

function App() {
  const [pokemonNames, setPokemonNames] = useState<string[]>([]);
  const [inputName, setInputName] = useState<string>("");
  const clear = () => {
    setPokemonNames([]);
  };
  const add = () => {
    if (!inputName) return;
    setPokemonNames([...pokemonNames, inputName]);
    setInputName("");
  };
  return (
    <div className="App">
      <div>
        <input
          type="text"
          value={inputName}
          onChange={(event) => setInputName(event.target.value)}
        />
        <button onClick={add}>add</button>
        <button onClick={clear}>clear</button>
      </div>
      <div style={{ display: "flex", flexDirection: "row" }}>
        {pokemonNames.map((pokemonName) => (
          <Pokemon name={pokemonName} key={pokemonName} />
        ))}
      </div>
    </div>
  );
}

export default App;
